<template>
	<view class="pb-120" style="padding-bottom: 200rpx;">
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				基本信息
			</view>
			<u-field v-model="info.name" label="姓名:" placeholder="必填"></u-field>
			<u-field v-model="info.idcard" label="身份证:" placeholder="必填" @click="showKeyboard('idcard')" disabled="true"></u-field>
			<u-field v-model="info.mobile" label="联系电话:" placeholder="必填" @click="showKeyboard('mobile')" disabled="true"></u-field>
			<view class="flex pd-30 bb" @click="goAddress">
				<view class="flex_l">
					<label>联系地址：</label>
					<view class="u-flex-1">
						<view>{{info.address}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<view class="pd-30 bb">
				<view class="flex">
					<view>
						回收地区选择
					</view>
					<picker @change="bindPickerChange" :value="index" :range="regions" range-key="alias">
						<view class="uni-input">{{info.region_id ? regions[index].alias : '请选择'}}</view>
					</picker>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="plr-36 size-34 bold mt-40">
			身份证正面
		</view>
		<view class="plr-36 mt-30 img flex1 flex-bottom">
			<image :src="positive" class="mr-20 mb-15" mode="" @click="uploadPositive"></image>
		</view>
		<view class="plr-36 size-34 bold mt-40">
			身份证反面
		</view>
		<view class="plr-36 mt-30 img flex1 flex-bottom">
			<image :src="back" class="mr-20 mb-15" mode="" @click="uploadBack"></image>
		</view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				其他
			</view>
			<u-field type="textarea" v-model="info.remarks" label="个人简介:" placeholder="如：吃苦耐劳、踏实肯干等"></u-field>
		</view>
		<view class="ptb-20" v-if="info.id">
			<u-field :value="info.status == 1 ? '正常' : '已锁定'" label="状态:"></u-field>
			<u-field :value="audit_state_list[info.audit_state]" label="审核状态:"></u-field>
			<u-field :value="info.reason" label="原因:" v-if="info.audit_state == -1"></u-field>
		</view>
		<view class="ptb-20" @click="toArticle" v-if="article_id">
			<view class="pd-40 text-center">
				<text>《回收员免责申明》</text>
			</view>
		</view>
		<u-keyboard :mode="mode" :tips="tips" @change="valChange" @backspace="backspace" safe-area-inset-bottom="true" :dot-enabled="false" z-index="9999" v-model="show"></u-keyboard>
		<view class="fixed-bottom pb-60">
			<u-button type="warning" @click="submit" v-if="!info.id">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		upload
	} from '../../common/common.js'
	export default {
		data() {
			return {
				article_id: null,
				field: '',
				mode: 'number',
				tips: '手机号码',
				show: false,
				address_id: 0,
				index: 0,
				regions: [],
				positive: '../../static/upload.png',
				back: '../../static/upload.png',
				audit_state_list: {'-1': '未通过', '0': '待审核', '1': '已通过'},
				info: {
					region_id: 0,
					name: '',
					mobile: '',
					idcard: '',
					positive: '',
					back: '',
					lng: 0,
					lat: 0,
					address: '',
					remarks: '',
				}
			};
		},
		onLoad() {
			this.$http('/api/region/init', {}).then(data => {
				this.regions = data.regions;
				this.wechat_tmpl_ids = data.wechat_tmpl_ids;
				this.article_id = data.article_id ? data.article_id : null;
				if (data.info) {
					this.info = data.info;
					this.positive = data.info.positive;
					this.back = data.info.back;
				}
			});
		},
		onUnload() {
			uni.$off('address_id');
		},
		onShow() {
			if (this.address_id) {
				this.$http('/api/address/detail', {
					id: this.address_id
				}).then(data => {
					this.info.address = data.address + data.corridor;
					this.info.lat = data.lat;
					this.info.lng = data.lng;
				});
			}
		},
		methods: {
			showKeyboard(field) {
				this.show = true;
				this.field = field;
				switch(field) {
					case 'mobile' :
						this.mode = 'number';
						this.tips = '手机号码';
						break;
					case 'idcard' :
						this.mode = 'card';
						this.tips = '身份证号';
						break;
				}
			},
			valChange(val) {
				this.info[this.field] += val;
			},
			backspace(field) {
				if(this.info[this.field].length) {
					this.info[this.field] = this.info[this.field].substr(0, this.info[this.field].length - 1);
				}
			},
			bindPickerChange(r) {
				this.index = parseInt(r.detail.value);
				this.info.region_id = this.regions[this.index].id;
			},
			toArticle() {
				uni.navigateTo({
					url: `/pages/my/set/detail?id=${this.article_id}`
				})
			},
			submit() {
				this.$http('/api/region/recyclerapplication', this.info, "POST").then(()=>{
					uni.showToast({
						title:'提交成功'
					});
					// #ifdef MP-WEIXIN
					let _this = this;
					if (_this.wechat_tmpl_ids && _this.wechat_tmpl_ids.length) {
						uni.requestSubscribeMessage({
							tmplIds: _this.wechat_tmpl_ids,
							success() {
								uni.navigateBack({});
							}
						})
					}
					// #endif
					// #ifndef MP-WEIXIN
					setTimeout(() => {
						uni.navigateBack({})
					}, 1000)
					// #endif
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/my/address/list?is_return=1'
				})
			},
			uploadPositive(){
				upload(1).then(data => {
					data.forEach(item=>{
						this.positive = item.img1;
						this.info.positive = item.img2;
					});
				})
			},
			uploadBack(){
				upload(1).then(data => {
					data.forEach(item=>{
						this.back = item.img1;
						this.info.back = item.img2;
					});
				})
			}
		},
		mounted() {
			let _this = this;
			uni.$on('address_id', function(id) {
				_this.address_id = id;
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-warning-hover {
		background-color: $yellow !important;
	}
	/deep/.u-btn--warning--disabled {
		background-color: $bg-1 !important;
	}
	.img{
		image{
			width: 164rpx;
			height: 164rpx;
		}
	}
</style>
